<template>
  <el-container>
    <el-header>
      <!-- <ui>
          <li><router-link to="">正在热映</router-link></li>
          <li><router-link to="">即将上映</router-link></li>
      </ui> -->
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ef4238"
        router
      >
        <el-menu-item index="/hotShow">正在热映</el-menu-item>
        <el-menu-item index="/waitShow">暂未上映</el-menu-item>
      </el-menu>
    </el-header>
    <el-main>
      <el-card>
        <div>
          <div class="ul_left">类型：</div>
          <ul>
            <li  @click="selectMovie('cate','total','')" :class="activeCateClass=='total'?'active':'noActive'"><el-link :underline="false">全部</el-link></li>
            <li v-for="(item,i) in categoryList" :key="i" @click="selectMovie('cate',i,item.cateName)" :class="activeCateClass==i?'active':'noActive'"><el-link :underline="false">{{item.cateName}}</el-link></li>
          </ul>
        </div>
        <el-divider></el-divider>
        <div>
          <div class="ul_left">区域：</div>
          <ul>
             <li  @click="selectMovie('area','total','')" :class="activeAreaClass=='total'?'active':'noActive'"><el-link :underline="false">全部</el-link></li>
            <li v-for="(item,i) in areaList" :key="i" @click="selectMovie('area',i,item.fareaName)" :class="activeAreaClass==i?'active':'noActive'"><el-link :underline="false">{{item.fareaName}}</el-link></li>
          </ul>
          <el-divider></el-divider>
        </div>
        <div>
          <div class="ul_left">年代：</div>
          <ul>
            <li  @click="selectMovie('age','total','')" :class="activeAgeClass=='total'?'active':'noActive'"><el-link :underline="false">全部</el-link></li>
            <li v-for="(item,i) in ageList" :key="i" @click="selectMovie('age',i,item.filmAge)" :class="activeAgeClass==i?'active':'noActive'"><el-link :underline="false">{{item.filmAge}}</el-link></li>
          </ul>
        </div>
      </el-card>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: "/hotShow",
      activeCateClass: "total",
      activeAreaClass: "total",
      activeAgeClass: "total",
      categoryList:[],
      areaList:[],
      ageList:[],
      query:{}
    };
  },
  created() {
    this.activeIndex = this.$route.path
    let cateIndex = this.$route.query.cateIndex
    let areaIndex = this.$route.query.areaIndex
    let ageIndex = this.$route.query.ageIndex
    if(cateIndex!=null){
      this.activeCateClass = cateIndex
    }
    if(areaIndex!=null){
      this.activeAreaClass = areaIndex
    }
    if(ageIndex!=null){
      this.activeAgeClass = ageIndex
    }
    this.getcateMenuList()
  },
   watch:{
      $route(to, from) {
        if(Object.getOwnPropertyNames(this.$route.query).length == 0){
           this.activeCateClass = 'total'
        this.activeAreaClass = 'total'
        this.activeAgeClass = 'total'
        }
       
      }
  },
  methods: {
    selectMovie(type,classIndex,queryName) {
     if(type == 'cate'){
       this.activeCateClass = classIndex
       this.query.cateName = queryName
       this.query.cateIndex = classIndex
       this.$router.push({
         path:this.$router.path,
          query:this.query
      } )
     }
     else if(type == 'area'){
       this.activeAreaClass = classIndex
       this.query.areaName = queryName
       this.query.areaIndex = classIndex
        this.$router.push({
         path:this.$router.path,
          query:this.query
      } )
     }else{
       this.activeAgeClass = classIndex
       this.query.filmAge = queryName
       this.query.ageIndex = classIndex
        this.$router.push({
         path:this.$router.path,
          query:this.query
      } )
     }
    },
    async getcateMenuList(){
      const {data:res} = await this.$http.get("/common/category/getList")
          if(res.code != 200){
            return this.$message.error(res.message)
          }
          else{
            this.categoryList = res.data
          }
            const {data:res2} = await this.$http.get("/common/filmarea/getList")
          if(res2.code != 200){
            return this.$message.error(res2.message)
          }
          else{
            this.areaList = res2.data
          }
            const {data:res3} = await this.$http.get("/common/filminfo/getAgeList")
          if(res3.code != 200){
            return this.$message.error(res3.message)
          }
          else{
            this.ageList = res3.data
          }
    }
  },
};
</script>
<style lang="less" scoped>
.el-container {
  .el-header {
    margin-top: -17px;
    padding: 0;
    ul {
      text-align: center;
      li {
        float: none;
        display: inline-block;
        text-align: center;
      }
    }
  }
  .el-main {
    margin: 0 auto;
     overflow: unset;
    .el-card{
      width: 1200px;
      margin-bottom: 30px;
     
    }
    .active {
      background: #f34d41;
      display: inline-block;
      border-radius: 14px;
      padding: 3px 9px;
      margin-left: 12px;
      .el-link.el-link--default {
     color: #fff; 
}
      a{
          cursor: auto;
          :hover{
              color: #fff;
          }
      }
    }
    .noActive{
         display: inline-block;
      border-radius: 14px;
      padding: 3px 9px;
      margin-left: 12px;
      a{
        :hover{
            color:#f34d41
        }
      }
    }
      .ul_left{
        float: left;
      }
      ul{
              margin-left: 40px;
      }

  }
}
</style>